<template>
	<view class="page ">
		<navigationBar :titleName="'密码重置'"></navigationBar>
		<view class="content setPadding">
			<view class="logo">
				<image :lazy-load="true" src="../static/images/logo/logo.png"></image>
			</view>
			<view class="list ">
				<view class="item">
					<iconfont type="pwd"></iconfont>
					<input class="input" v-model="old_password" type="text" maxlength="32" placeholder="原密码为空则不填"
						password="true" />
				</view>
				<view class="item">
					<iconfont type="pwd"></iconfont>
					<input class="input" v-model="new_password" type="text" maxlength="32" placeholder="请输入新密码"
						password="true" />
				</view>
				<view class="item">
					<iconfont type="pwd"></iconfont>
					<input class="input" v-model="confirm_new_password" type="text" maxlength="32" placeholder="请确认新密码"
						password="true" />
				</view>
			</view>
			<view class="button" hover-class="button-hover" @tap="updatePassword"><text>提交</text></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import iconfont from '@/components/iconfont/iconfont.vue';
	import validator from '@/common/validator';
	export default {
		components: {
			iconfont
		},
		onShow() {
			this.$initPageTitle(); //初始化页面标题
		},
		onLoad() {},
		data() {
			return {
				old_password: '',
				new_password: '',
				confirm_new_password: ''
			};
		},
		methods: {
			/*修改密码*/
			updatePassword() {
				if (!validator.checkNewPassword(this.new_password)) {
					return;
				} else if (this.new_password != this.confirm_new_password) {
					this.$alert('两次输入的新密码不一样');
					return;
				}
				uni.showLoading({
					title: '提交中…'
				});
				this.$app.request({
					url: this.$baseApp.api.user.updatePassword,
					data: {
						oldPassword: this.old_password,
						newPassword: this.new_password
					},
					method: 'POST',
					dataType: 'json',
					success: res => {
						console.log(res);
						if (res.code == 200) {
							uni.hideLoading();
							this.$alert('密码修改成功');

							/*后退*/
							setTimeout(() => {
								uni.navigateBack();
							}, 1000);
						} else {
							this.$alert(res.msg);
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;

		.logo {
			display: flex;

			image {
				margin: 43rpx auto ;
				height: 225rpx;
				width: 225rpx;
			}
		}


		.list {
			display: flex;
			flex-direction: column;
			// padding-top: 40rpx;
			// // padding-left: 100rpx;
			// // padding-right: 100rpx;
			padding-bottom: 40rpx;

			.item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				border-bottom: 1upx solid rgba(230, 230, 230, 1);

				.icon {
					color: #ababab;
					margin-right: 5rpx;
					font-size: 40rpx;
				}

				.verfiy-code-icon {
					.icon {
						font-size: 52rpx;
						margin-right: -6rpx;
						margin-left: -4rpx;
					}
				}

				.input {
					flex: 1;
					text-align: left;
					font-size: 30rpx;
					margin-left: 16rpx;
				}
			}

			.verify-item {
				position: relative;

				.verify-btn {
					position: absolute;
					top: 22rpx;
					right: 10rpx;
					color: #f9a853;
					font-size: 30rpx;
					z-index: 9999;
				}
			}
		}

		.protocol {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 65rpx;
			padding-left: 100rpx;
			text-align: left;

			.agree-box {
				width: 55rpx;
			}

			.name {
				margin-left: 5rpx;
			}
		}

		.other {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			margin-top: 30rpx;
			color: #8CC7B5;
			text-align: center;
			height: 40rpx;
			line-height: 40rpx;

			text {
				font-size: 24rpx;
				margin-left: 15rpx;
				margin-right: 15rpx;
			}
		}
	}
</style>
